{{ define "title" }}{{ .Title }}{{ end }}

{{ define "css" }}

{{ if site.Params.customSyntaxHighlighting }}
<link rel="stylesheet" data-custom-syntax-highlighting />
<style>
  .chroma {
    padding: 1em;
    background-color: var(--dream-pre-bg, #f5f5f5);
    border-radius: .5em;
    overflow: auto;
  }

  html.dark .chroma {
    background-color: var(--dream-pre-bg-dark, #262626);
  }
</style>
{{ else }}
<style>
  pre {
    padding: 1em;
    overflow: auto;
  }
</style>
{{ end }}

{{ if site.Params.valine }}
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
{{ end }}

{{ end }}

{{ define "main" }}
<div class="mt-4 px-4">
  {{ if site.Params.showTableOfContents }}
  <div class="relative" x-data="{ height: '' }" x-init="height = $el.scrollHeight + 'px'">
  {{ else }}
  <div>
  {{ end }}
    {{ if site.Params.showTableOfContents }}
    <div class="absolute right-0 lg:w-36 xl:w-48 hidden lg:block" :style="{ height }">
      {{ .TableOfContents }}
    </div>
    {{ end }}
    <article class="mx-auto prose dark:prose-invert" id="dream-single-post-main">
      <header>
        <h1>{{ .Title }}</h1>
        <p class="text-sm">
          {{ if site.Params.Experimental.jsDate }}
            <span data-format="luxon">{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}</span>
          {{ else }}
            {{ if eq site.Language.Lang "zh" }}
              {{ index site.Data.zh.Weekday (printf "%d" .Date.Weekday) }}，{{ index site.Data.zh.Month (printf "%d" .Date.Month) }} {{ .Date.Day }} 日，{{ .Date.Year }} 年
            {{ else if eq site.Language.Lang "es" }}
              {{ index site.Data.es.Weekday (printf "%d" .Date.Weekday) }}, {{ .Date.Day }} de {{ index site.Data.es.Month (printf "%d" .Date.Month) }} de {{ .Date.Year }}
            {{ else if eq site.Language.Lang "pt" }}
              {{ index site.Data.pt.Weekday (printf "%d" .Date.Weekday) }}, {{ .Date.Day }} de {{ index site.Data.pt.Month (printf "%d" .Date.Month) }} de {{ .Date.Year }}
            {{ else if eq site.Language.Lang "fr" }}
              {{ index site.Data.fr.Weekday (printf "%d" .Date.Weekday) }} {{ .Date.Day }} {{ index site.Data.fr.Month (printf "%d" .Date.Month) }} {{ .Date.Year }}
            {{ else }}
              {{ .Date.Format "Monday, Jan 2, 2006" }}
            {{ end }}
          {{ end }}

          | <span>{{ .ReadingTime }}{{ T "minuteRead" .ReadingTime }}</span>

          {{ if ne .Params.nolastmod true }}
          | <span>{{ T "updateAt" }}
            {{ if site.Params.Experimental.jsDate }}
              <span data-format="luxon">{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}</span>
            {{ else }}
              {{ if eq site.Language.Lang "zh" }}
                {{ index site.Data.zh.Weekday (printf "%d" .Lastmod.Weekday) }}，{{ index site.Data.zh.Month (printf "%d" .Lastmod.Month) }} {{ .Lastmod.Day }} 日，{{ .Lastmod.Year }} 年
              {{ else if eq site.Language.Lang "es" }}
                {{ index site.Data.es.Weekday (printf "%d" .Lastmod.Weekday) }}, {{ .Lastmod.Day }} de {{ index site.Data.es.Month (printf "%d" .Lastmod.Month) }} de {{ .Lastmod.Year }}
              {{ else if eq site.Language.Lang "pt" }}
                {{ index site.Data.pt.Weekday (printf "%d" .Lastmod.Weekday) }}, {{ .Lastmod.Day }} de {{ index site.Data.pt.Month (printf "%d" .Lastmod.Month) }} de {{ .Lastmod.Year }}
              {{ else if eq site.Language.Lang "fr" }}
                {{ index site.Data.fr.Weekday (printf "%d" .Date.Weekday) }} {{ .Date.Day }} {{ index site.Data.fr.Month (printf "%d" .Date.Month) }} {{ .Date.Year }}
              {{ else }}
                {{ .Lastmod.Format "Monday, Jan 2, 2006" }}
              {{ end }}
            {{ end }}</span>
          {{ end }}
        </p>
        <div class="flex justify-between">
          {{ partial "author.html" (dict "Params" .Params "template" "single") }}

          {{ partial "share.html" . }}
        </div>
      </header>

      {{ if and .Params.Cover site.Params.showSummaryCoverInPost }}
      <img src="{{ .Params.Cover }}" alt="{{ .Title }}" />
      {{ end }}

      {{ .Content | emojify }}

      {{ if site.Params.showPrevNextPost }}
      <div class="divider"></div>
      <div class="flex flex-col md:flex-row justify-between gap-4 py-4">
        {{ with .NextInSection }}
        <a class="group btn btn-outline" href="{{ .RelPermalink }}" title="{{ .Title }}">
          <ion-icon name="chevron-back"></ion-icon>
          <div class="inline-flex flex-col items-start">
            <span class="text-base-content/60 group-hover:text-neutral-content/60 text-xs font-normal">{{ T "prevPage" }}</span>
            <span class="max-w-48 truncate">{{ .LinkTitle }}</span>
          </div>
        </a>
        {{ else }}
        <div></div>
        {{ end }}

        {{ with .PrevInSection }}
        <a class="group btn btn-outline" href="{{ .RelPermalink }}" title="{{ .Title }}">
          <div class="inline-flex flex-col items-end">
            <span class="text-base-content/60 group-hover:text-neutral-content/60 text-xs font-normal">{{ T "nextPage" }}</span>
            <span class="max-w-48 truncate">{{ .LinkTitle }}</span>
          </div>
          <ion-icon name="chevron-forward"></ion-icon>
        </a>
        {{ else }}
        <div></div>
        {{ end }}
      </div>
      {{ end }}
    </article>
  </div>

  {{ $disqusShortname := (or site.Config.Services.Disqus.Shortname site.DisqusShortname) }}

  {{ if or $disqusShortname site.Params.utterancesRepo site.Params.valine }}
  <div class="divider max-w-[65ch] mx-auto"></div>
  {{ end }}

  <section class="max-w-[65ch] mx-auto space-y-4">
    {{ if $disqusShortname }}
    <article>
      {{ partial "disqus.html" (dict "Context" . "Identifier" .RelPermalink) }}
    </article>
    {{ end }}

    {{ if site.Params.utterancesRepo }}
    <template x-if="['localhost', '127.0.0.1'].indexOf(window.location.hostname) == -1">
      <article>
        <script
          src="https://utteranc.es/client.js"
          repo="{{ site.Params.utterancesRepo }}"
          issue-term="og:title"
          theme="github-light"
          crossorigin="anonymous"
          async>
        </script>
      </article>
    </template>
    {{ end }}

    {{ if site.Params.valine }}
    <article>
      <div id="vcomments"></div>
    </article>
    <script>
      new Valine({
        el: '#vcomments',
        appId: '{{ site.Params.LEANCLOUD_APP_ID }}',
        appKey: '{{ site.Params.LEANCLOUD_APP_KEY }}',
        lang: '{{ site.Params.VALINE_LANGUAGE }}'
      })
    </script>
    {{ end }}
  </section>
</div>
{{ end }}

{{ define "js" }}

{{ if site.Params.Experimental.jsDate }}
{{ partial "luxon.html" . }}
{{ end }}

{{ if site.Params.customSyntaxHighlighting }}
{{- $syntaxLightCSS := resources.Get "css/syntax-light.css" | minify -}}
{{- $syntaxDarkCSS := resources.Get "css/syntax-dark.css" | minify -}}
<script>
  window.customSyntaxHighlighting = {
    light: {{ $syntaxLightCSS.RelPermalink}},
    dark: {{ $syntaxDarkCSS.RelPermalink }}
  }

  document.addEventListener('alpine:initialized', () => {
    var isDark = Alpine.store('darkMode').isDark()
    var customSyntaxHighlightingUrl = isDark ? window.customSyntaxHighlighting.dark : window.customSyntaxHighlighting.light

    document
      .querySelector('link[data-custom-syntax-highlighting]')
      .setAttribute('href', customSyntaxHighlightingUrl)
  })
</script>
{{ end }}

{{ end }}
